<template>
  <div ref="pieChart2" style="width: 35rem; height: 30rem;margin: 0 auto;"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import { getTalentEduChart } from '@/api/company';
import * as echarts from 'echarts';
 
const pieChart2 = ref(null);

var chartsDataList = []
async function getEduChartDetail() {
  const id = '91321200MACTU4PJ4N';
  const { code, data } = await getTalentEduChart(id);
  if(code === 200) {
    data.forEach(item=>{
      chartsDataList.push({
        name: item.title,
        value: item.value
      })
    })
    console.log('chartsDataList:',chartsDataList);
  }
}

const chartPieCanvas = ()=>{
  const chartInstance = echarts.init(pieChart2.value);
  // const option = {
  //   series: [
  //     {
  //       type: 'pie',
  //       color: [
  //         '#208AFF',
  //         '#63E3DF',
  //         // '#FFC734',
  //       ],
  //       data: chartsDataList,
  //       radius: ['0', '60%'],
  //       label: {
  //           show: true,
  //           formatter: function (arg) {
  //               console.log(arg)
  //               return arg.data.name + '\n' + arg.value + '人'
  //           }
  //       }
  //     }
  //   ]
  // };
  option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};
  chartInstance.setOption(option);
}
 
onMounted(() => {
  getEduChartDetail()
  setTimeout(()=>{
    chartPieCanvas()
  },1000)
});
</script>
 
<style>
/* 你的样式 */
</style>